<template>
  <div class="data-view">
    <common-block :activeNum="activeNum" :steps="steps">
      <div class="title" slot="title">选择数据</div>
    </common-block>
    <div class="bottom bottom-1" v-if="activeNum === 0">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          ref="singleTable"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column prop="analyzeName" label="数据名称"></el-table-column>
          <el-table-column prop="analyzeFinished" label="数据总数"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="analysis(scope.row)">查看分析</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </template>
    </div>
    <div class="bottom bottom-2" v-if="activeNum === 1">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1">{{viewData.analyzeName}}</td>
          <th>首页地址</th>
          <td colspan="3">{{viewData.homeUrl}}</td>
        </tr>
        <tr>
          <th>任务标签</th>
          <td colspan="1">
            <p v-if="viewData.analyzeTag.length===0">未配置</p>
            <p v-else v-for="(dom,i) in viewData.analyzeTag" :key="i">{{dom}}</p>
          </td>
          <th>分析文件数</th>
          <td colspan="1">{{viewData.analyzeFinished + '/' + viewData.analyzeTotal}}</td>
          <th>创建时间</th>
          <td colspan="1">{{viewData.createTime}}</td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1">{{viewData.taskState}}</td>
          <th>任务进度</th>
          <td colspan="3">{{viewData.progress}}</td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1">{{viewData.lastStartTimeStr||'未启动'}}</td>
          <th>任务用时</th>
          <td colspan="1">{{viewData.analyzeCostTime}}</td>
          <th>过滤数量</th>
          <td colspan="1">{{viewData.analyzeFiltered+viewData.analyzeFailed}}</td>
        </tr>
      </table>
      <br/>
      <div class="data-title">数据查看</div>
      <template>
        <el-table
          :data="tableData1"
          style="width: 100%"
          ref="singleTable"
        >
          <el-table-column type="index" width="50" label="序号"> </el-table-column>
          <el-table-column prop="updateTime" width="100" label="统计日期"></el-table-column>
          <el-table-column prop="url" width="100" label="网址"></el-table-column>
          <el-table-column prop="analyzeResultTitle" width="50" label="标题"></el-table-column>
          <el-table-column v-for="(item,index) in tableHeader" :key="index" :label="item.analyzeRuleName" :width="item.analyzeRuleName==='内容'?'':'100'">
            <template slot-scope="scope">
              <span>{{scope.row.analyzeResultMap[item.analyzeRuleName].join(',')}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          @size-change="handleSizeChange1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
      </template>
    </div>
    <div class="bottom bottom-3" v-if="activeNum === 2">
      <div class="data-title">{{viewData.analyzeName}}</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>分析名称</th>
          <td colspan="1">{{viewData.analyzeName}}</td>
          <th>首页地址</th>
          <td colspan="3">{{viewData.homeUrl}}</td>
        </tr>
        <tr>
          <th>包含性分析过滤(url)</th>
          <td colspan="1">
            <p v-if="viewData.analyzeIncludeFilter.length===0">未配置</p>
            <p v-else v-for="(item,index) in viewData.analyzeIncludeFilter" :key="index">{{item}}</p>
          </td>
          <th>排除性分析过滤(url)</th>
          <td colspan="1">
            <p v-if="viewData.analyzeExcludeFilter.length===0">未配置</p>
            <p v-else v-for="(item,index) in viewData.analyzeExcludeFilter" :key="index">{{item}}</p>
          </td>
          <th>任务标签</th>
          <td colspan="1">
            <p v-if="viewData.analyzeTag.length===0">未配置</p>
            <p v-else v-for="(dom,i) in viewData.analyzeTag" :key="i">{{dom}}</p>
          </td>
        </tr>
        <tr>
          <th>包含性关键字过滤</th>
          <td colspan="1">
            <p v-if="viewData.analyzeIncludeKeyWord.length===0">未配置</p>
            <p v-else v-for="(dom,i) in viewData.analyzeIncludeKeyWord" :key="i">{{dom}}</p>
          </td>
          <th>排除性关键字过滤</th>
          <td colspan="3">
            <p v-if="viewData.analyzeExcludeKeyWord.length===0">未配置</p>
            <p v-else v-for="(dom,i) in viewData.analyzeExcludeKeyWord" :key="i">{{dom}}</p>
          </td>
        </tr>
        <tr>
          <th>下载大小</th>
          <td colspan="1">{{viewData.downloadTotalSize}}</td>
          <th>分析文件数</th>
          <td colspan="1">{{viewData.analyzeFinished + '/' + viewData.analyzeTotal}}</td>
          <th>创建时间</th>
          <td colspan="1">{{viewData.createTime}}</td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1">{{viewData.taskState}}</td>
          <th>任务进度</th>
          <td colspan="3">{{viewData.progress}}</td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1">{{viewData.lastStartTimeStr||'未启动'}}</td>
          <th>任务用时</th>
          <td colspan="1">{{viewData.analyzeCostTime}}</td>
          <th>失败数量</th>
          <td colspan="1">{{viewData.analyzeFailed}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import CommonBlock from "@/components/CommonBlock.vue";
import {getList,WebSiteTask,AnalyzeRule,AnalyzeResult} from '../../api/api'
export default {
  components: {
    CommonBlock,
  },
  data() {
    return {
      activeNum: 0,
      steps: ["选择数据", "查看数据", "分析总览"],
      selectRows: [],
      total: 0,
      currentPage: 1,
      tableData: [{ 1: 1 }, {}],
      total1: 0,
      currentPage1: 1,
      tableData1: [{ 1: 1 }, {}],
      pageSize1: 10,
      pageSize: 10,
      viewData:{},
      tableHeader:{},
      nowAnalysis:{}
    };
  },
  mounted () {
      this.getList()
  },
  methods: {
    handleCurrentChange1(val){
        this.currentPage1=val;
        this.getViewTableData()
    },
    handleSizeChange1(val){
        this.pageSize1=val;
        this.currentPage1=1;
        this.getViewTableData()
    },
    extend(target, source) {
      for (var obj in source) {
          target[obj] = source[obj];
      }
      return target;
    },
    analysis (dom){
        this.nowAnalysis=dom;
        this.activeNum=1;
        WebSiteTask({idWebSiteTask:dom.idWebSiteTask}).then(res=>{
            let item=this.extend(dom,res.data.records[0]);
            item.progress = Math.floor((item.analyzeFinished + item.analyzeFiltered + item.analyzeFailed) * 10000 / item.analyzeTotal) ? Math.floor((item.analyzeFinished + item.analyzeFiltered + item.analyzeFailed) * 10000 / item.analyzeTotal) / 100 : 0
            this.viewData=item
        });
        AnalyzeRule({
            idWebAnalyzeTask:dom.idWebAnalyzeTask,
            analyzeResultState:'ANALYZED',
            current:1,
            size:50
        }).then(res=>{
            this.tableHeader =res.data.records
        });
        this.getViewTableData()
    },
    getViewTableData(){
      AnalyzeResult({
          idWebAnalyzeTask:this.nowAnalysis.idWebAnalyzeTask,
          analyzeResultState:'ANALYZED',
          current:this.currentPage1,
          size:this.pageSize1
      }).then(res=>{
          this.tableData1=res.data.records;
          this.total1=res.data.total
      })
    },
    getList() {
        getList({
            current:this.currentPage,
            size:this.pageSize
        }).then(res=>{
            this.tableData=res.data.records
        })
    },
    upStep() {
      this.activeNum -= 1;
      if (this.activeNum === 0) {
        this.$refs.singleTable.setCurrentRow(this.selectRows);
      }
    },
    downStep() {
      if (Object.keys(this.selectRows).length === 0&&this.activeNum === 0) {
        this.$message.error("请选择一条数据");
        return false;
      } else {
        this.activeNum += 1;
      }
    },
    handleCurrentChange(val) {
      this.selectRows = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.data-view {
  display: flex;
  flex-direction: column;
  .title {
    font-size: 1.5rem;
    color: #000;
    display: inline-block;
    font-weight: bold;
  }
  .bottom {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    .data-title {
      border: 1px solid #ebeef5;
      padding: .8rem .5rem;
      width: 100%;
      text-align: center;
      background: #fafafa;
      font-size: 1rem;
      padding: 1rem 0;
      border-bottom: none;
    }
  }
  .el-pagination{
    width: 100%;
    text-align: right;
    padding: 0;
    margin: .5rem 0
  }
  table {
    width: 100%;
    background: #e8e8e8;
    td {
      background: #fff;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    th {
      background: #fafafa;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-weight: normal;
      font-size: .9rem;
      line-height: 1.5;
    }
  }
}
</style>
